<template>
  <div class="generalize-agent">

    <div class="generalize-wx-box">

      <div class="generalize-wx-content">
        <img :src="userUrl" v-if="userUrl" class="wx-avatar"/><span class="wx-avatar" v-else-if="!userUrl && tagId"></span>
        <span class="wx-nickname">{{userName}}</span>
      </div>

      <div class="generalize-qrcode">
        <vue-qr :logoSrc="config1.logo" :size="500" :text="config1.value" class="qr-code-pic" :correctLevel="3"
                :margin="0"
                :dotScale="0.8" v-if="role == 0"></vue-qr>

        <vue-qr :logoSrc="config2.logo" :size="500" :text="config2.value" class="qr-code-pic" :correctLevel="3"
                :margin="0"
                :dotScale="0.8" v-if="role == 1"></vue-qr>

        <span class="share-title" v-if="role == 0">扫描二维码，添加推广员</span>
        <span class="share-title" v-if="role == 1">扫描二维码，注册蓝聘账号</span>

      </div>

    </div>

    <button type="button" class="look-generalize" v-if="role == 0" @click="lookPerform">查看推广业绩 ></button>
    <button type="button" class="look-generalize" v-if="role == 1" @click="lookMyPerform">查看我的业绩 ></button>
  </div>
</template>

<script>
  import VueQr from 'vue-qr';
  import {baseUrl} from "../../../config/env";
  import {getUrlKey} from "../../../config/util";

  export default {
    name: "generalizeAgent",
    data() {
      return {
        config1: {//推广员
          value: '',
          logo: '',
          logoMargin: 6
        },
        config2: {//推广员下级
          value: '',
          logo: '',
          logoMargin: 6
        },
        role: '',
        userName: '',
        userUrl: '',
        tag: '',//身份唯一标识
        tagId: ''//登录标识
      }
    },
    created(){
      this.role = getUrlKey("role");
      this.userName = getUrlKey("userName");
      this.userUrl = getUrlKey("userUrl") ? decodeURIComponent(getUrlKey("userUrl")) : '';
      this.tag = getUrlKey("tag");
      this.tagId = getUrlKey("tagId");
    },
    mounted() {
      if (this.role == 0) {
        this.getWxCode();//获取微信授权链接
      } else if (this.role == 1) {
        let url = window.location.protocol + "//www.lanpin123.com/bluehired/resident/#/generalizeRegist?tag=" + this.tag;//上线需要改动
        this.config2.value = url;
        this.config2.logo = this.userUrl ? this.userUrl : require('./logo.png');
      }
    },
    methods: {
      lookPerform() {//业绩详情
        this.$router.push({
          path: "/generalizePerform", query: {
            "role": this.role,
            "userName": this.userName,
            "userUrl": this.userUrl,
            "tag": this.tag,
            "tagId": this.tagId
          }
        })
      },
      lookMyPerform() {//我的业绩
        this.$router.push({
          path: "/performanceDetail", query: {
            "role": this.role,
            "userName": this.userName,
            "userUrl": this.userUrl,
            "tag": this.tag,
            "tagId": this.tagId
          }
        })
      },
      getWxCode() {
        this.axios.get(baseUrl + "/promotion/get_code").then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            let redirect = resultObj.data;
            let redirectUrl = redirect.split("get_access_token")[0] + "get_access_token?tag=" + (this.tag ? this.tag : '') + redirect.split("get_access_token")[1];
            this.config1.value = redirectUrl;
            this.config1.logo = this.userUrl;
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      }
    },
    components: {
      VueQr
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"
  .generalize-agent
    display: flex
    flex-direction column
    wh(100%, 100%)
    background: linear-gradient(0deg, rgba(31, 163, 255, 1), rgba(67, 204, 255, 1))
    .generalize-wx-box
      display: flex
      flex-direction: column
      align-items: center
      wh(9.36rem, 12.093rem)
      background: rgba(255, 255, 255, 1)
      border-radius: 0.16rem
      margin: 0.48rem auto 0.64rem
      .generalize-wx-content
        display: flex
        align-items: center
        wh(8.347rem, 2.4rem)
        border-bottom: 0.027rem dashed rgba(224, 224, 224, 1)
        .wx-avatar
          wh(1.44rem, 1.44rem)
          border-radius: 0.16rem
          background: #f2f2f2
          margin-right: 0.213rem
        .wx-nickname
          font-size: 0.453rem
          color: rgba(51, 51, 51, 1)
        .login-tip
          font-size: 0.453rem
          color: rgba(51, 51, 51, 1)
          margin: 0 auto
      .generalize-qrcode
        display: flex
        flex-direction: column
        align-items: center
        margin-top: 0.667rem
        margin-bottom: 0.933rem
        .qr-code-pic
          margin-bottom: 0.467rem
          wh(7.2rem, 7.2rem)
        .share-title
          font-size: 0.4rem
          color: rgba(51, 51, 51, 1)
    .look-generalize
      width: 4rem
      height: 0.907rem
      border: 0.027rem solid rgba(255, 255, 255, 1)
      border-radius: 0.453rem
      font-size: 0.373rem
      color: rgba(255, 255, 255, 1)
      margin: 0 auto
      background: #23a7ff
</style>

